<template>
	<view class="main-box">
		<div class="tip-main-box" v-if="flag">

			<div class="tip-box">
				<image class="close" mode="widthFix"
					src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Fclose.png"
					@click="flag=false"></image>

				<div class="tip-title">{{ title }}</div>
				<div class="tip-sub-title">{{ subTitle }}</div>
				<image mode="widthFix" class="icon" :src="lists.img" alt="" @click="close"></image>
				<div class="btn" @click="touses">去使用</div>
			</div>
		</div>
		<!-- <top-navigation  title="我的券包" @back="topNavigationBack"></top-navigation> -->
		<view class="type-box">
			<view class="itemx">
				<image @click="back" class="back" mode="heightFix"
					src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fmy-coupon%2Fback-icon.png">
				</image>
			</view>
			<view class="item" v-for="(item,index) in typeList" :key="index" :class="{current:currentType==index}"
				@click="clickType(index)">
				{{item.title}}
				<view class="split"></view>
			</view>
		</view>
		<view class="" style="height: 80rpx;">

		</view>
		<div class="list-box">
			<div class="item free-trial">
				<div class="left">
					<!-- <image mode="widthFix" class="icon"
						src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fmh-icon.png">
					</image> -->
					<div class="record-info">
						<div class="record-info-title">体验7天VIP盲盒包</div>
						<div class="record-info-date"></div>
					</div>
				</div>
				<div class="right">
					<div class="btn" @click.stop="useMangHe()">去使用</div>
				</div>
			</div>
			<template v-for="(item,index) in couponList">
				<div class="product-box">

					<view class="product-box-item" @click="selectCoupon(index)">
						<div class="left">
							<!-- <image mode="widthFix" class="icon" :src="item.img">
							</image> -->
							<div class="record-info">
								<div class="record-info-title">{{item.name}}</div>
								<div class="times">使用时间:{{item.startTimeStr}}-{{item.endTimeStr}}</div>

							</div>
						</div>
						<div class="right">
							<image class="icon" mode="widthFix"
								:src="currentCouponIndex == index ? 'https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fmy-coupon%2Fup-icon.png':'https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fmy-coupon%2Fdown-icon.png'">
							</image>
						</div>
					</view>
					<template v-if="currentCouponIndex == index">
						<view class="product-item" v-for="(childItem,childIndex) in item.list" :key="childIndex">
							<div class="left">
								<view class="imgs">
									<image mode="widthFix" class="icon " :src="childItem.img">
									</image>
								</view>
								<div class="record-info">
									<div class="record-info-title">{{childItem.name}}</div>
									<div class="record-info-date">
										使用时间:{{childItem.startTimeStr}}</div>
									<div class="record-info-date">
										到期时间:{{childItem.endTimeStr}}</div>
								</div>
							</div>
							<div class="right">
								<view @click="toUse(childItem)" class="btn"
									:class="{'time-limit':childItem.status == -1,'use':childItem.status == 1}">
									{{childItem.status == 0 ? '去使用':''}}
									{{childItem.status == -1 ? '已过期':''}}
									{{childItem.status == 1 ? '已使用':''}}
								</view>
							</div>
						</view>

					</template>
				</div>
			</template>
			<template v-for="(item,index) in codeslist" :key="index">
				<div class="product-boxs">

					<view class="product-box-item">
						<div class="left">

							<div class="record-info">
								<div class="record-info-title">Wearfit Pro 会员季卡</div>
								<div class="times">兑换码：<text class="codes">{{item.quanCode}}</text></div>


							</div>
						</div>
						<div class="rights">

							<image style="width: 130rpx;height: 50rpx;" src="../../static/btns.png"
								@tap="copyLink(item.quanCode)"></image>
						</div>
					</view>

				</div>
			</template>
		</div>
		<!-- 列出可兑换的vip -->
		<receive v-if="isShowReceive" @use="confirmUse" @close="closeReceive"></receive>
		<!-- 确认用户是否领取页面 -->
		<tip-box v-if="tipBoxData.isShowTipBox" :title="tipBoxData.title" :sub-title="tipBoxData.subTitle"
			:icon="tipBoxData.icon" :value="tipBoxData.value" :btn-text="tipBoxData.btnText" @success="tipBoxSuccess"
			@close="tipBoxClose">
		</tip-box>
	</view>

</template>

<script>
	import couponApi from '../../api/couponApi';
	import userApi from '../../api/userApi';
	import dateUtil from '../../utils/dateUtil';
	import messageUtil from "@/utils/messageUtil.js"
	import deviceUtil from '../../utils/deviceUtil';

	export default {
		data() {
			return {
				currentType: 0,
				lists: [],
				flag: false,
				typeList: [{
					title: '全部',
					status: 'all'
				}, {
					title: '可使用',
					status: 0
				}, {
					title: '已使用',
					status: 1
				}, {
					title: '已过期',
					status: -1
				}],
				couponList: [

				],
				codeslist: [],
				useCoupon: {}, // 准备使用的优惠券
				useProduct: {}, // 准备使用到哪个产品上
				currentCouponIndex: -1, // 当前选中的产品
				isShowReceive: false,
				tipBoxData: {
					isShowTipBox: false,
					title: '',
					subTitle: '',
					icon: '',
					value: '',
					btnText: '',
				},
			};
		},
		onLoad() {
			this.initData()
		},
		onPullDownRefresh() {
			this.initData()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		},
		methods: {
			copyLink(e) {
				console.log(e)
				wx.setClipboardData({
					data: e,

					success: function(res) {
						wx.showToast({
							title: '复制成功',

						})
					}
				})
			},
			initData() {
				this.getCouponList()
				console.log(uni.getStorageSync('weike'))
				this.codeslist = uni.getStorageSync('weike')
			},
			getCouponList() {
				let status = this.typeList[this.currentType].status
				let dataList = []

				couponApi.getCouponList(status, res => {
					console.log(res)
					if (res.code == '401') {
						userApi.loginOut()
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}
					res.data.forEach(item => {
						if (!item.name) {
							return;
						}
						item.startTimeStr = dateUtil.getDateFormtByTimestamp(item.startTime, '.')
						item.endTimeStr = dateUtil.getDateFormtByTimestamp(item.endTime, '.')

						item.list.forEach(childItem => {
							childItem.startTimeStr = dateUtil.getDateTimeFormtByTimestamp(childItem
								.startTime, '.')
							childItem.endTimeStr = dateUtil.getDateTimeFormtByTimestamp(childItem
								.endTime, '.')
						})
						dataList.push(item)
					})
					this.couponList = dataList
				})

			},
			topNavigationBack() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},
			clickType(index) {
				this.currentType = index;
				this.currentCouponIndex = -1;
				this.getCouponList()
			},
			selectCoupon(index) {
				if (this.currentCouponIndex == index) {
					this.currentCouponIndex = -1
				} else {
					this.currentCouponIndex = index
				}
			},
			showTipBox(title, subTitle, icon, btnText, value) {
				this.tipBoxData.title = title
				this.tipBoxData.subTitle = subTitle
				this.tipBoxData.icon = icon
				this.tipBoxData.value = value
				this.tipBoxData.btnText = btnText
				this.tipBoxData.isShowTipBox = true;
			},
			tipBoxSuccess(item) {
				switch (item.type) {
					case 2: // 去使用,调用领取会员方法
						userApi.receive(this.useCoupon.id, this.useProduct, res => {
							messageUtil.showSuccess('兑换成功')
							this.initData()
							this.closeReceive()
						})
						break;
				}
				this.tipBoxData.isShowTipBox = false;
			},
			tipBoxClose(item) {
				this.tipBoxData.isShowTipBox = false;
			},
			useMangHe() {
				this.showTipBox('抽中啦！', '恭喜您抽中南瓜电影会员7天',
					'https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Findex%2Fconfirm-icon%2Fconfirm-ng2-icon.png',
					'去使用', {
						type: 1
					})
			},
			touses() {
				const formDatax = new FormData();

				formDatax.append('token', uni.getStorageSync('token'));
				formDatax.append('qid', this.lists.id);
				formDatax.append('goodsId', 111);
				formDatax.append('img', this.lists.img);
				fetch('https://www.sx2b2c.com/api/rf/lqvip', {
						method: 'post',
						body: formDatax
					})
					.then(response => response.json())
					.then(data => {
						console.log(data)
						uni.showToast({
							title: data.msg,
							icon: "none"

						})
						if (data.code == 1) {
							this.initData()
						}

					})
					.catch(error => console.error(error));
			},
			toUse(item) {
				console.log(item)


				console.log(item.startTimeStr)
				const time = (item.startTimeStr).replace(/\./g, "/")
				console.log(Date.parse(time))
				if (Date.parse(time) > Date.now()) {
					uni.showToast({
						title: "请在规定时间内使用",
						icon: "none"

					})
				} else {
					if (item.lqType > 7 && item.lqType < 17) {
						console.log(item, '999')
						this.lists = item
						this.flag = true

					} else {
						if (item.status == 0) {
							this.isShowReceive = true;
							this.useCoupon = item;
						}
					}

				}


			},
			confirmUse(item) {
				this.useProduct = item;
				console.log('confirmUse', item)
				this.showTipBox('确认兑换', item.title,
					item.image,
					'确定', {
						type: 2
					})
			},
			closeReceive() {
				this.isShowReceive = false
			},
			back() {
				uni.navigateBack()
			}

		}
	}
</script>

<style lang="scss">
	.tip-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fmy-coupon%2Fconfirm-receive-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 2;

		.tip-box {
			border-radius: 20rpx;
			padding: 25rpx 0;
			width: 90%;
			margin: 0 auto;
			box-sizing: border-box;
			position: relative;
			text-align: center;

			.close {
				position: absolute;
				right: 0;
				top: -80rpx;
				width: 50rpx;
			}

			.tip-title {
				text-align: center;
				font-size: 42rpx;
				font-weight: 600;
				letter-spacing: 1rpx;
				color: #fde3bd;
			}

			.tip-sub-title {
				font-size: 28rpx;
				letter-spacing: 1rpx;
				color: #fde3bd;
				margin-top: 15rpx;
				text-align: center;
			}

			.icon {
				display: block;
				width: 200rpx;
				margin: 15rpx auto 0;
			}

			.btn {
				width: 300rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background-image: linear-gradient(to bottom, #d65153, #9e0e11);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-weight: 600;
				letter-spacing: 15rpx;
				color: #ffffff;
				margin: 30rpx auto 0;
			}
		}
	}

	.codes {
		background-color: #fcd9a2;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.main-box {
		background-color: #202125;
		min-height: 100vh;
		padding-bottom: 50rpx;
	}

	.fuzhi {
		background-color: red;
		width: 230rpx
	}

	.type-box {
		background-color: #202125;
		position: fixed;
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		height: 80rpx;
		width: 100%;
		padding-bottom: 10rpx;
		z-index: 9999;

		.itemx {
			width: 12%;
			font-size: 28rpx;
			color: #fcfcfe;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			background-color: #202125;

			.back {
				width: auto;
				height: 25rpx;
			}
		}

		.item {
			width: 22%;
			font-size: 28rpx;
			color: #fcfcfe;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.back {
				width: auto;
				height: 25rpx;
			}

			.split {
				display: none;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 6rpx;
				border-radius: 100rpx;
				background-color: #ffe3c1;
			}
		}

		.current {
			background-image: linear-gradient(to bottom, #fffef8, #fde9c6);
			-webkit-background-clip: text;
			color: transparent;
			font-weight: 600;

			.split {
				display: block;
			}
		}
	}

	.list-box {
		width: 96%;
		margin: 0 auto;
		padding-top: 20rpx;

		.free-trial {
			background-image: url('https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fmy-coupon%2Fdefault-type-item-bg.png');
			background-size: 100% 100%;
		}


		.item {

			padding: 0 20rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: flex-end;
			align-items: stretch;
			margin-bottom: 20rpx;
			flex-grow: 1;
			height: 150rpx;

			.left {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 56%;

				.icon {
					width: 80rpx;
					margin: 0 15rpx 0 0;
				}

				.record-info-title {
					font-size: 30rpx;
					letter-spacing: 1rpx;
					color: #37384d;
					font-weight: 600;
					text-align: center;
				}

				.record-info-date {
					font-size: 22rpx;
					letter-spacing: 1rpx;
					color: #ce9390;
					margin-top: 10rpx;
				}
			}

			.split {
				border-left: dashed 2rpx #ce938f;
			}

			.right {
				display: flex;
				justify-content: center;
				align-items: center;

				.btn {
					padding: 8rpx 25rpx;

					background-color: #a30004;
					border-radius: 25rpx;
					font-size: 25rpx;
					color: #fff;
				}
			}
		}


		.product-box {
			background-color: #373b46;
			border-radius: 10rpx;
			padding-bottom: 1rpx;
			margin-bottom: 20rpx;

			.product-box-item {
				padding: 0 20rpx;
				background-image: url('https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fmy-coupon%2Fdefault-type-item-bg.png');
				background-size: 100% 100%;
				display: flex;
				justify-content: flex-end;
				align-items: stretch;
				flex-grow: 1;
				height: 150rpx;

				.left {
					display: flex;
					align-items: center;
					width: 56%;

					.icon {
						width: 80rpx;
						margin: 0 15rpx 0 0;
					}

					.record-info-title {
						font-size: 30rpx;
						letter-spacing: 1rpx;
						color: #37384d;
						font-weight: 600;
					}

					.record-info-date {
						font-size: 20rpx;
						letter-spacing: 1rpx;
						color: #9a4409;
						margin-top: 10rpx;
					}
				}

				.times {
					font-size: 20rpx;
					margin-top: 10rpx;
					color: #9a4409;
				}

				.split {
					border-left: dashed 2rpx #ce938f;
				}

				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 90rpx;

					.icon {
						width: 42rpx;
						height: auto;
					}
				}

				.rights {
					display: flex;
					justify-content: center;
					align-items: center;

					.btn {
						padding: 8rpx 25rpx;

						background-color: #a30004;
						border-radius: 25rpx;
						font-size: 25rpx;
						color: #fff;
					}
				}
			}



			.product-item {
				width: 96%;
				margin: 20rpx auto 0;
				padding: 20rpx 0 20rpx 20rpx;
				background-image: url('../../static/coupons.png');
				background-size: 100% 100%;
				display: flex;
				justify-content: space-between;

				flex-grow: 1;
				box-sizing: border-box;

				&:last-child {
					margin-bottom: 20rpx;
				}

				.left {
					display: flex;
					align-items: center;
					width: 70%;


					.imgs {
						width: 30%;
					}

					.icon {
						width: 100rpx;
						height: 100rpx;

						margin: 0 15rpx 0 0;
					}

					.record-info-title {
						font-size: 25rpx;
						letter-spacing: 1rpx;
						color: #363b47;
						font-weight: 600;
					}

					.record-info-date {
						font-size: 22rpx;
						letter-spacing: 1rpx;
						color: #ff0000;
						margin-top: 10rpx;

					}
				}

				.split {
					border-left: dashed 2rpx #ce938f;
				}


				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;

					.btn {
						padding: 8rpx 25rpx 8rpx 25rpx;
						background-color: #920003;
						border-radius: 25rpx;
						font-size: 25rpx;
						color: #ffffff;
					}

					.time-limit {
						background-color: #a4a4a4;
						color: #e5e5e5;
					}

					.use {
						background-color: #f6c184;
						color: #e57700;
					}

					.in-exchange {
						background-color: #920003;
						color: #ffffff;
					}
				}
			}


		}

		.product-boxs {
			background-color: #373b46;
			border-radius: 10rpx;
			padding-bottom: 1rpx;
			margin-bottom: 20rpx;

			.product-box-item {
				padding: 0 20rpx;
				background-image: url('../../static/bg.png');
				background-size: 100% 100%;
				display: flex;
				justify-content: flex-end;
				align-items: stretch;
				flex-grow: 1;
				height: 150rpx;

				.left {
					display: flex;
					align-items: center;
					width: 54%;

					.icon {
						width: 80rpx;
						margin: 0 15rpx 0 0;
					}

					.record-info-title {
						font-size: 30rpx;
						letter-spacing: 1rpx;
						color: #37384d;
						font-weight: 600;
					}

					.record-info-date {
						font-size: 20rpx;
						letter-spacing: 1rpx;
						color: #9a4409;
						margin-top: 10rpx;
					}
				}

				.times {
					font-size: 20rpx;
					margin-top: 10rpx;
					color: #9a4409;
				}

				.split {
					border-left: dashed 2rpx #ce938f;
				}

				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 90rpx;

					.icon {
						width: 42rpx;
						height: auto;
					}
				}

				.rights {
					display: flex;
					justify-content: center;
					align-items: center;

					.btn {
						padding: 8rpx 25rpx;

						background-color: #a30004;
						border-radius: 25rpx;
						font-size: 25rpx;
						color: #fff;
					}
				}
			}



			.product-item {
				width: 96%;
				margin: 20rpx auto 0;
				padding: 20rpx 0 20rpx 20rpx;
				background-image: url('../../static/coupons.png');
				background-size: 100% 100%;
				display: flex;
				justify-content: space-between;

				flex-grow: 1;
				box-sizing: border-box;

				&:last-child {
					margin-bottom: 20rpx;
				}

				.left {
					display: flex;
					align-items: center;
					width: 70%;


					.imgs {
						width: 30%;
					}

					.icon {
						width: 100rpx;
						height: 100rpx;

						margin: 0 15rpx 0 0;
					}

					.record-info-title {
						font-size: 25rpx;
						letter-spacing: 1rpx;
						color: #363b47;
						font-weight: 600;
					}

					.record-info-date {
						font-size: 22rpx;
						letter-spacing: 1rpx;
						color: #ff0000;
						margin-top: 10rpx;

					}
				}

				.split {
					border-left: dashed 2rpx #ce938f;
				}


				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;

					.btn {
						padding: 8rpx 25rpx 8rpx 25rpx;
						background-color: #920003;
						border-radius: 25rpx;
						font-size: 25rpx;
						color: #ffffff;
					}

					.time-limit {
						background-color: #a4a4a4;
						color: #e5e5e5;
					}

					.use {
						background-color: #f6c184;
						color: #e57700;
					}

					.in-exchange {
						background-color: #920003;
						color: #ffffff;
					}
				}
			}


		}
	}
</style>